<!DOCTYPE html><!-- 此行必须加！！！ -->
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>页面阅读进度条</title>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
  <script src="../00_lib/js/jquery.min.js"></script>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: verdana, Arial;
    font-size: 0.8rem;
  }
  .progress-indicator-2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background-color: #0A74DA;
  }

</style>
<body style>
  <div style="margin: 10px 40px; padding: 5px 10px;">
    <h2>页面阅读进度条 简易版</h2>
    <a href="https://es6.ruanyifeng.com/">参考</a>
    <div>
      <ul id="test_"></ul>
    </div>
  </div>

  <div class="progress-indicator-2"></div>

  <script>
    // 渲染数据
    (function() {
      let html = '';
      for (let index = 0; index < 100; index++) {
        html += '<li> item - ' + index + '</li>'; 
      }
      $('#test_').append(html);
    }());

    // 取消scroll事件的监听函数
    $(window).off('scroll');

    (function() {
      let $w = $(window);
      let $prog2 = $('.progress-indicator-2');
      let wh = $w.height(); // let wh = document.documentElement.clientHeight;
      let h = $('body').height();
      let sHeight = h - wh;
      $w.on('scroll', function() {
        window.requestAnimationFrame(function(){
          let perc = Math.max(0, Math.min(1, $w.scrollTop() / sHeight));
          updateProgress(perc);
        });
      });

      function updateProgress(perc) {
        $prog2.css({width: perc * 100 + '%'});
      }

    }());

  </script>
</body>
</html>